<template>
    <div class="page_container register_page">
        <div class="register_head">
            <div class="left_box" @click="goHome">
                <img src="~@/assets/logo.png" style="width: 58px; height: 55px; border-radius: 8px" alt="">
                <span class="title">随心旅行</span>
                <span class="welcome_txt">欢迎注册</span>
            </div>
            <div class="right_box">
                已有随心账号？
                <el-button :size="size" @click="goLogin">登录</el-button>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="registerForm" ref="registerForm" :size="size" label-width="100px">
                <el-form-item :rules="yh_rules({required:true})" label="用户名" prop="userName">
                    <el-input v-model="registerForm.userName" placeholder="请输入用户名" clearable />
                </el-form-item>
                <el-form-item :rules="yh_rules({required:true})" label="姓名" prop="realName">
                    <el-input v-model="registerForm.realName" placeholder="请输入姓名" clearable />
                </el-form-item>
                <el-form-item :rules="yh_rules({required:true})" label="性别" prop="sex">
                    <el-radio-group v-model="registerForm.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :rules="yh_rules({required:true, type: 'phone'})" label="手机号" prop="phone">
                    <el-input v-model="registerForm.phone" placeholder="请输入手机号" clearable />
                </el-form-item>
                <el-form-item :rules="yh_rules({required:true})" label="身份证号" prop="idCard">
                    <el-input placeholder="请输入"
                              v-model="registerForm.idCard">
                    </el-input>
                </el-form-item>
                <el-form-item :rules="yh_rules({required:true, min: 6})" label="登录密码" class="password_item" prop="password">
                    <el-input placeholder="请输入密码" v-model="registerForm.password"
                              maxlength="18"
                              show-password></el-input>
                    <span style="position: absolute; right: -118px; color: #999; font-size: 12px">6-18位，区分大小写</span>
                </el-form-item>
                <el-form-item :rules="yh_rules({required:true})" label="确认密码" prop="rePassword">
                    <el-input placeholder="请输入密码" v-model="registerForm.rePassword" show-password></el-input>
                </el-form-item>
            </el-form>
            <div class="btn_box">
                <el-button type="primary" @click="register">注 册</el-button>
            </div>
        </div>

        <span class="foot_box">随心旅游 ©版权所有</span>
    </div>

</template>

<script>
  import {addUser} from '@/api/user'
  import { mapGetters } from 'vuex'
    export default {
      name: 'register',
      computed: {
        ...mapGetters(['size'])
      },
      data() {
        return {
          registerForm: {
            userName: '',
            realName: '',
            sex: '0',
            phone: '',
            idCard: '',
            password: '',
            rePassword: ''
          }
        }
      },
      methods: {
        validatePassWord() {
          let {password, rePassword} = this.registerForm
          if (password !== rePassword) {
            this.$message.warning('两次输入密码不同')
          }
          return password === rePassword
        },
        register() {
          this.$refs.registerForm.validate(valid => {
            if (valid) {
              if (!this.validatePassWord()) return
              this.addUser()
            }
          })
        },
        addUser() {
          let params = this.registerForm
          addUser(params).then(res => {
            this.$confirm('注册成功', '提示', {
              confirmButtonText: '去登录',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {
              this.goLogin()
            })
          })
        },
        goHome() {
          this.$router.push({
            path: '/'
          })
        },
        goLogin() {
          this.$router.push({
            path: '/login'
          })
        }
      }
    }
</script>

<style lang="scss" scoped>
    .register_head {
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left_box {
            display: flex;
            align-items: center;
            cursor: pointer;
            .welcome_txt {
                font-size: 18px;
                margin-top: 8px;
                margin-left: 10px;
            }
            .title {
                margin-left: 10px;
                font-size: 28px;
                color: #3a8ee6;
                font-weight: bold;
            }
        }
    }
    .register_page {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .form_box {
            margin-top: 50px;
            width: 50%;
            max-width: 500px;
            .btn_box {
                text-align: center;
            }
            .password_item {
                position: relative;
            }
        }
        .foot_box {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #999;
        }
    }
</style>
